<template>
  <div class="nav">
    <el-menu
      :default-active="$route.fullPath"
      class="el-menu-vertical-demo"
      background-color="#0d2439"
      text-color="#fff"
      active-text-color="blue"
      router
      :collapse="sidebar"
      unique-opened
    >
      <el-submenu
        :index="item.path"
        v-for="item in routes"
        :key="item.path"
        v-show="item.meta.type == type || type == 1"
      >
        <template slot="title">
          <i class="iconfont" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item
          :index="item.path + '/' + i.path"
          v-for="i in item.children"
          :key="item.path + '/' + i.path"
          >{{ i.meta.title }}</el-menu-item
        >
      </el-submenu>
      <el-menu-item>
        <template slot="title">
          <i class="el-icon-d-arrow-right"></i>
          <span slot="title">sever</span>
        </template>
      </el-menu-item>
      <el-menu-item>
        <template slot="title">
          <i class="el-icon-d-arrow-right"></i>
          <span slot="title">demo</span>
        </template></el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MyNav",
  data() {
    return {
      routes: [],
    };
  },
  computed: {
    ...mapGetters(["sidebar", "type"]),
  },
  mounted() {
    let routes = [];
    this.$router.options.routes.forEach((item) => {
      if (item.meta) {
        routes.push(item);
      }
    });
    this.routes = routes;
  },
};
</script>
<style scoped lang='less'>
@import "https://at.alicdn.com/t/font_3245638_m6yzagylls.css?spm=a313x.7781069.1998910419.96&file=font_3245638_m6yzagylls.css";
.item {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

.ac {
  background-color: #0a1d2e;
}
.nav {
  // width: 165px;
  height: calc(100% - 50px);
  background-color: #0d2439;
  display: flex;
  flex-direction: column;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 160px;
}
.el-menu {
  border-right: none;
}
.iconfont {
  margin-right: 10px;
  font-size: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 165px;
  min-height: 400px;
}
</style>